import React, { useState, useEffect } from 'react'
import axios from 'axios'
import { useNavigate } from 'react-router-dom'
import { Tabs } from 'antd-mobile'

export default function Feiyigongfanf() {
    const navigate = useNavigate()
    const [data, setData] = useState([])
    const show = async () => {
        const res = await axios.get('http://127.0.0.1:3000/getHeritage')
        setData(res.data.data)
    }
    useEffect(() => {
        show()
    }, [])
    const xiang = (i) => {
        navigate('/Gongf', { state: i })
    }
    return (
        <div>
            <div>
                <div style={{ marginTop: '20px', marginLeft: '10px', display: 'flex' }}>
                    <svg t="1739780179808" className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5849" width="25" height="25"><path d="M274.510074 461.204104c130.168642-125.846196 260.332167-251.684206 390.490575-377.400442 53.595662-51.864228 133.49848 32.354895 79.653131 84.346013-115.838262 112.008027-231.6755 223.893256-347.450317 335.904353C513.596358 619.888196 629.989251 735.852324 746.444567 851.690586c52.978609 52.733015-26.921139 136.953162-79.712483 84.282568C535.946388 805.873074 405.233348 675.710572 274.510074 545.546024 252.90194 523.93789 252.342192 482.563574 274.510074 461.204104L274.510074 461.204104zM274.510074 461.204104" fill="#272636" p-id="5850" onClick={() => { navigate('/app/home') }} ></path></svg>
                    <p style={{ fontWeight: 'bold', fontSize: '18px', marginTop: '5px', margin: '0 auto' }}>非遗工坊</p>
                </div>
                <div>
                    <Tabs style={{ background: '#f2f2f2' }}>
                        <Tabs.Tab title='推荐' key='fruits'>
                            {
                                data.map(i => {
                                    return <div key={i._id} style={{ display: 'flex', background: '#fff', marginTop: '10px', borderRadius: '10px' }} onClick={() => { xiang(i) }}>
                                        <div>
                                            <img src={i.img} alt="" style={{ width: '100px', height: '100px' }} />
                                        </div>
                                        <div style={{ marginLeft: '12px' }}>
                                            <p style={{ fontSize: '18px', fontWeight: 'bold', marginTop: '10px' }}>{i.name}</p>
                                            <p style={{ fontSize: '14px', color: '#999', marginTop: '20px' }}>
                                                <img src='https://cdn8.axureshop.com/demo2024/2322481/images/%E9%9D%9E%E9%81%97%E5%B7%A5%E5%9D%8A/u165.svg'></img>{i.dizhi}</p>
                                        </div>

                                    </div>
                                })
                            }
                        </Tabs.Tab>
                        <Tabs.Tab title='附近' key='vegetables'>

                        </Tabs.Tab>
                    </Tabs>
                </div>
            </div>
        </div>
    )
}
